<template>
  <div class="pos">
<!--    输入信息区域-->
    <div>
      <input class="form-control" type="text" placeholder="输入你想要的菜品" v-model="this.keyword" style="width: 80%;display: inline-block">
      <button type="button" class="btn btn-primary" @click.prevent="getDishListByKeyword" style="display: inline-block">查找</button>
    </div>

    <hr/>
<!--    信息展示-->


  </div>

  <div class="info-pos">
    <div class="card" style="width: 80rem; margin-top: 15px "  v-for="item in ShopList" >
      <div class="card-body">
        <h5 class="card-title">{{item.merchant.shopName}}</h5>
        <h6 class="card-subtitle mb-2 text-muted">评分：{{item.merchant.shopGrade}}</h6>
        <p class="card-text">{{item.merchant.shopDescription}}</p>
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">dishName</th>
            <th scope="col">dishDescription</th>
            <th scope="col">dishPrice</th>
            <th scope="col">dishGrade</th>
            <th scope="col">dishSales</th>
            <th scope="col">isSale</th>
            <th scope="col">isRecommend</th>
            <th scope="col">##########</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(dish, index) in item.dishList" :key="item.dishNumber">

            <th scope="row">{{++index}}</th>
            <td>{{dish.dishName}}</td>
            <td>{{dish.dishDescription}}</td>
            <td>{{dish.dishPrice}}</td>
            <td>{{dish.dishGrade}}</td>
            <td>{{dish.dishSales}}</td>
            <td>{{dish.isSale ? "在售" : "未售"}}</td>
            <td>{{dish.isRecommend}}</td>
            <td><button type="button" class="btn btn-primary" @click.prevent="chooseDish(dish)">加入购物车</button></td>
          </tr>

          </tbody>
        </table>
      </div>
    </div>
  </div>





</template>

<script>
export default {
  name: 'QueryDishes',
  data() {
    return {
      //返回的商家和菜品
      ShopList:[],

      //查找的菜品信息
      keyword: ""

    }
  },

  methods: {
    async getDishListByKeyword() {
      const {data: res} = await this.$http.get('/customer/getShopListByKeyword?keyword='+this.keyword)
      this.ShopList=res.data
    },

    async getRecommend(){
      const {data: res} = await this.$http.get('/customer/getRecommend')
      this.ShopList=res.data
    },

    async chooseDish(dish) {
      if(dish.isSale==0){
        alert("未售")
      }
      else {
        const {data: res} = await this.$http.get('/choice/chooseDish?customerPhoneNumber='
            +localStorage.getItem("username_C")+ '&dishNumber='+dish.dishNumber)
      }
    }

  },

  created() {
    this.getRecommend()
  }

}
</script>

<style lang="less" scoped>
.pos{
  margin: 0 auto;
  width: 1000px;
  height: 200px;
  border: 50px solid white;

}

.info-pos{
  margin: 0 auto;
  width: 80rem;
  height: 200px;

}

</style>
